<template>
    <view>
        <!-- 收货地址 -->
        <view class="iot-revice_address_row">
            <!-- 当收货地址 不存在 按钮显示  对象 空对象 bool类型也是true -->
            <view class="iot-address_btn" v-if="!address.userName">
                <button @tap="handleChooseAddress" type="primary" plain>获取收货地址</button>
            </view>
            <!-- 当收货地址 存在 详细信息就显示 -->
            <view v-else class="iot-user_info_row">
                <view class="iot-user_info">
                    <view>{{ address.userName }}</view>
                    <view>{{ address.all }}</view>
                </view>
                <view class="iot-user_phone">{{ address.telNumber }}</view>
            </view>
        </view>

        <!-- 购物车内容 -->
        <view class="iot-cart_content">
            <view class="iot-cart_title">购物车</view>
            <view class="iot-cart_main">
                <!-- 当cart数组 长度不为0 显示 商品信息 -->
                <block v-if="cart.length !== 0">
                    <view class="iot-cart_item" v-for="(item, index) in cart" :key="item.goods_id">
                        <!-- 复选框 -->

                        <view class="iot-cart_chk_wrap">
                            <checkbox-group :data-id="item.goods_id" @change="handeItemChange">
                                <checkbox :checked="item.checked"></checkbox>
                            </checkbox-group>
                        </view>

                        <!-- 商品图片 -->

                        <navigator class="iot-cart_img_wrap">
                            <image mode="widthFix" :src="item.goods_small_logo"></image>
                        </navigator>

                        <!-- 商品信息 -->

                        <view class="iot-cart_info_wrap">
                            <view class="iot-goods_name">{{ item.goods_name }}</view>
                            <view class="iot-goods_price_wrap">
                                <view class="iot-goods_price">￥{{ item.goods_price }}</view>
                                <view class="iot-cart_num_tool">
                                    <view @tap="handleItemNumEdit" :data-id="item.goods_id" :data-operation="-1"
                                        class="num_edit">-</view>
                                    <view class="iot-goods_num">{{ item.num }}</view>
                                    <view @tap="handleItemNumEdit" :data-id="item.goods_id" :data-operation="1"
                                        class="num_edit">+</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
                <block v-else>
                    <image mode="widthFix"
                        src="http://hbimg.b0.upaiyun.com/e1b1467beea0a9c7d6a56b32bac6d7e5dcd914f7c3e6-YTwUd6_fw658">
                    </image>
                </block>
            </view>
        </view>

        <!-- 底部工具栏 -->
        <view class="iot-footer_tool">
            <!-- 全选 -->
            <view class="iot-all_chk_wrap">
                <checkbox-group @change="handleItemAllCheck">
                    <checkbox :checked="allChecked">全选</checkbox>
                </checkbox-group>
            </view>
            <!-- 总价格 -->
            <view class="iot-total_price_wrap">
                <view class="iot-total_price">
                    合计:
                    <text class="iot-total_price_text">￥{{ totalPrice }}</text>
                </view>
                <view>包含运费</view>
            </view>
            <!-- 结算 -->
            <view class="iot-order_pay_wrap" @tap="handlePay">结算({{ totalNum }})</view>
        </view>
    </view>
</template>

<script>
import { getSetting, chooseAddress, openSetting, showModal, showToast } from '../../utils/async';
export default {
    data() {
        return {
            address: {
                userName: '',
                all: '',
                telNumber: ''
            },
            cart: [],
            allChecked: false,
            totalPrice: 0,
            totalNum: 0
        };
    },
    onShow() {
        const address = uni.getStorageSync('address');
        const cart = uni.getStorageSync('cart') || [];

        this.address = address

        this.setCart(cart);
    },
    methods: {
        async handleChooseAddress() {
            try {
                const res1 = await getSetting();
                const scope = res1.authSetting['scope.address'];
                if (scope === false) {
                    await openSetting();
                }
                let address = await chooseAddress();
                address.all = address.provinceName + address.cityName + address.countyName + address.detailInfo;
                uni.setStorageSync('address', address);
            } catch (error) { }
        },

        handeItemChange(e) {
            // 1 获取被修改的商品的id
            const goods_id = e.currentTarget.dataset.id;
            // 2 获取购物车数组
            let { cart } = this;
            // 3 找到被修改的商品对象
            let index = cart.findIndex((v) => v.goods_id === goods_id);
            // 4 选中状态取反
            cart[index].checked = !cart[index].checked;
            this.setCart(cart);
        },

        // 设置购物车状态同时 重新计算 底部工具栏的数据 全选 总价格 购买的数量
        setCart(cart) {
            let allChecked = true;
            // 1 总价格 总数量
            let totalPrice = 0;
            let totalNum = 0;
            cart.forEach((v) => {
                if (v.checked) {
                    totalPrice += v.num * v.goods_price;
                    totalNum += v.num;
                } else {
                    allChecked = false;
                }
            });
            // 判断数组是否为空
            if (cart.length != 0) {
                allChecked = allChecked;
            } else {
                allChecked = false;
            }

            this.cart = cart
            this.totalPrice = totalPrice
            this.totalNum = totalNum
            this.allChecked = allChecked

            uni.setStorageSync('cart', cart);
        },

        // 商品全选功能
        handleItemAllCheck() {
            // 1 获取data中的数据
            let { cart, allChecked } = this;
            // 2 修改值
            allChecked = !allChecked;
            // 3 循环修改cart数组 中的商品选中状态
            cart.forEach((v) => (v.checked = allChecked));
            // 4 把修改后的值 填充回data或者缓存中
            this.setCart(cart);
        },

        // 商品数量的编辑功能
        async handleItemNumEdit(e) {
            // 1 获取传递过来的参数
            const { operation, id } = e.currentTarget.dataset;
            // 2 获取购物车数组
            let { cart } = this;
            // 3 找到需要修改的商品的索引
            const index = cart.findIndex((v) => v.goods_id === id);
            // 4 判断是否要执行删除
            if (cart[index].num === 1 && operation === -1) {
                // 4.1 弹窗提示
                const res = await showModal({
                    content: '您是否要删除？'
                });
                if (res.confirm) {
                    cart.splice(index, 1);
                    this.setCart(cart);
                }
            } else {
                // 4  进行修改数量
                cart[index].num += operation;
                // 5 设置回缓存和data中
                this.setCart(cart);
            }
        },

        // 点击 结算
        async handlePay() {
            // 1 判断收货地址
            const { address, totalNum } = this;
            if (!address.userName) {
                await showToast({
                    title: '您还没有选择收货地址'
                });
                return;
            }
            // 2 判断用户有没有选购商品
            if (totalNum === 0) {
                await showToast({
                    title: '您还没有选购商品'
                });
                return;
            }
            // 3 跳转到 支付页面
            uni.navigateTo({
                url: '/pages/pay/index'
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
